<template>
    <div>
        <Shortcut></Shortcut>
        <Header> </Header>
        <div class="inner">
            <Navigation></Navigation>
            <div class="findgoods">
                <FindGoods></FindGoods>
            </div>
            <div class="kind clearfix">
                <div
                    class="content fl"
                    v-for="(item, index) in kind"
                    :key="index"
                >
                    <div @click="toKind(item.typeId)">
                        <div
                            class="kind-title"
                            :class="{ selected_title: item.selected }"
                        >
                            {{ item.title }}
                        </div>
                        <div
                            class="kind-content"
                            :class="{ selected_content: item.selected }"
                        >
                            {{ item.content }}
                        </div>
                    </div>
                </div>
            </div>
            <Kind :kindId="kindId"></Kind>
        </div>
        <el-backtop righ="200px"></el-backtop>
        <!-- <div>我是主页</div> -->
    </div>
</template>

<script setup>
import Shortcut from "@/components/common/Shortcut";
import Header from "@/components/index/Header";
import Navigation from "@/components/index/Navigation";
import FindGoods from "@/components/index/FindGoods";
import Kind from "@/components/index/Kind";
import { ref } from "vue";

let kind = ref([
    { typeId: 1, title: "精选", content: "猜你喜欢", selected: true },
    { typeId: 2, title: "智能先锋", content: "大电器城", selected: false },
    { typeId: 3, title: "居家优品", content: "品质生活", selected: false },
    { typeId: 4, title: "超市百货", content: "百货生鲜", selected: false },
    { typeId: 5, title: "时尚达人", content: "美妆穿搭", selected: false },
    { typeId: 6, title: "进口好物", content: "时尚国际", selected: false },
])

let kindId = ref(1);
const toKind = (typeId) => {
    kindId.value = typeId;
    for (let i in kind.value) {
        kind.value[i].selected = false;
        if (typeId == (parseInt(i) + 1)) {
            kind.value[i].selected = true;
        }
    }
}

</script>

<style lang="less" scoped>
.inner {
    background-color: #f3f4f3;
    .findgoods {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .kind {
        width: var(--content-width);
        margin: 0 auto;
        height: 70px;
        background-color: #fff;
        text-align: center;
        .content {
            width: 198px;
            margin-top: 10px;
            &:not(:last-child) {
                border-right: 1px solid #e8e8e8;
            }
            .kind-title {
                font-size: 16px;
                font-weight: 700;
                height: 30px;
                line-height: 30px;
            }
            .kind-content {
                font-size: 14px;
                color: #999;
            }
            &:hover {
                cursor: pointer;
                color: rgb(250, 43, 43);
            }
            &:hover div:last-child {
                cursor: pointer;
                color: rgb(250, 43, 43);
            }
            > div {
                width: 80px;
                margin: 0 auto;
            }
            .selected_title {
                background-color: rgb(250, 43, 43);
                color: #fff;
                border-radius: 15px;
            }
            .selected_content {
                color: rgb(250, 43, 43);
            }
        }
    }
}
</style>